<template>
	<view v-show="obj.show" class="container"  @click="maskHide">
		<view class="flex_center" :class="{mask: obj.mask !== undefined ? obj.mask : true,}">
			<slot name="modal-content">
				<view class="modal">
					<view v-show="modal.title" class="flex_center modal-title" :class="{'no-content': !modal.content}">
						{{ modal.title }}
					</view>
					<view v-show="obj.content" class="flex_center modal-content">
						<slot name="content">
							<view class="text">
								{{ obj.content }}
							</view>
						</slot>
					</view>
					<view class="flex modal-footer">
						<view v-show="obj.cancel !== undefined ? obj.cancel : true" class="btn-box">
							<view class="flex_center btn cancel" @click="cancelClick">
								{{ obj.cancelText || '取消' }}
							</view>
						</view>
						<view class="btn-box">
							<view class="flex_center btn confirm" @click="confirmClick">
								{{ obj.confirmText || '确定' }}
							</view>
						</view>
					</view>
				</view>
			</slot>
		</view>
	</view>
</template>

<script>
	export default {
		name:"common-modal",
		model: {
			prop: 'modal',
			event: 'update:modal'
		},
		props: {
			modal: {
				type: Object,
				default: () => ({
					// title: 标题
					// content: 直接展示的内容
					// maskCliH: 是否遮罩关闭
					// cancel: 是否展示取消
					// cancelText: 取消文字
					// confirmText: 确认文字
					// confirmFun: 确认后的回调函数
				})
			}
		},
		data() {
			return {
				obj: {}
			};
		},
		watch: {
			modal: {
				handler(newVal) {
					console.log(newVal);
					this.obj = { ...newVal };
				},
				deep: !0,
				immediate: !0
			}
		},
		methods: {
			maskHide(){
				this.obj.maskCliH && this.cancelClick();
			},
			cancelClick(){
				this.obj.show = false;
				this.$emit('cance');
				this.$emit('update:modal',this.obj);
			},
			confirmClick(){
				this.cancelClick();
				this.$emit('confirm',this.obj);
				/* 小程序不支持这样调用 */
				// #ifndef MP
				// this.obj.confirmFun && this.obj.confirmFun();
				// #endif
			},
		},
	}
</script>

<style lang="less" scoped>
.container {
	position: fixed;
	height: 100vh;
	width: 100vw;
	top: 0;
	left: 0;
	z-index: 999;
	& > .flex_center {
		height: 100%;
	}
	.mask {
		background-color: rgba(0, 0, 0, 0.6);
	}
	.modal {
		border-radius: 16rpx;
		background-color: #fff;
		width: 600rpx;
		
		&-title {
			font-size: 32rpx;
			font-weight: 600;
			padding-top: 40rpx;
			&.no-content {
				padding: 60rpx 40rpx;
			}
		}
		&-content {
			padding: 40rpx 30rpx;
		}
		&-footer {
			font-size: 32rpx;
			height: 98rpx;
			border-top: 2rpx solid #EBEBED;
			.cancel {
				border-right: 2rpx solid #EBEBED;
				color: #999999;
			}
			.confirm {
				color: #0FA291;
			}
			.btn-box {
				flex: 1;
				.btn {
					height: 98rpx;
				}
			}
		}
	}
}
</style>